<template>
    <view class="content">

        <view class="bg"></view>

        <view class="box">
            <view class="header">
                <view class="name">{{ bodyData.name }}</view>
            </view>
            <view class="center">
                <view class="content">{{ bodyData.content }}</view>
                <view v-if="bodyData.price != '' && bodyData.price != null && bodyData.price != 0" class="price">
                    抵扣{{ bodyData.price }}元
                </view>
                <view class="price" v-else>
                    <view v-if="bodyData.discount != '' && bodyData.discount != null && bodyData.discount != 0"
                        class="price">
                        打{{ bodyData.discount }}折
                    </view>
                </view>

                <view style="height: 20rpx;"></view>

                <view>
                    <view class="lingqu-btn"
                    @click="getBenefitCoupon(bodyData.id)"
                    >立即领取</view>
                </view>

                <view style="height: 40rpx;"></view>
            </view>
            <view class="time">
                <view class="start">可用时间：
                    <text style="color:#999">领取当天生效，有效期{{ bodyData.delayDay }}天</text>
                </view>
            </view>
            <view class="time">
                <view class="start">可领取用户：
                    <text style="color:#999">所有用户</text>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
export default {
    props: {
    },
    data() {
        return {
            bodyData: {
                "content": "内容",
                "createTime": "2023-03-22 18:07:09",
                "delayDay": 20, //延迟使用天数
                "discount": 8, //折扣
                "effectiveDay": 0, //有效天数
                "endTime": "2023-03-30 14:38:58", //结束时间
                "flag": "xxx", //活动标识
                "id": 1, //用户id
                "imgUrl": "图片", //图片
                "name": "清洗券", //名称
                "price": 100, //价格
                "startTime": "2023-03-23 14:38:56", //开始时间
                "status": 1 //状态 0不启用 1启用
            },
            token: "",
            id:""
        }
    },
    onLoad(options) {
        var token = uni.getStorageSync('token');

        if (token == null || token == '') {
            uni.setStorageSync('token', options.token);
        }

        this.token = uni.getStorageSync('token');
        this.id = options.id;

        this.getBodyData();
    },
    mounted() {
    },
    methods: {
        // 加载数据
        getBodyData() {
            this.$kt.request.request({
                api: this.$api.taskActivity.getActivityBenefitById,
                data: {
                    id: this.id
                },
                stateSuccess: (res) => {
                    this.bodyData = res.data;
                }
            })
        },
        // 领取
        getBenefitCoupon(couponId) {

            // 获取活动id:getActivity
            this.$kt.request.request({
                api: this.$api.taskActivity.getActivity,
                data: {
                    flag: 'xrzc'
                },
                stateSuccess: (res) => {
                    var activityId = res.data.id;
                    // 领取优惠券:getBenefitCoupon
                    this.$kt.request.request({
                        api: this.$api.taskActivity.getBenefitCoupon,
                        data: {
                            activityId,
                            couponId
                        },
                        stateSuccess: (res1) => {
                            uni.showToast({
                                title: '领取成功',
                                icon: 'success',
                                duration: 1000
                            });
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }, 1000);
                        },
                        stateFail: (res1) => {
                            uni.showToast({
                                title: res1.msg,
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    });
                },
                stateFail: (res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 2000
                    });
                }
            });


        },
    }
}
</script>

<style lang="scss" scoped>
pages {
    background-color: #f3f3f3;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    z-index: -1;
}

.content {
    width: 100%;
    height: 100%;
    padding: 30rpx;
    box-sizing: border-box;
}

.box {
    position: fixed;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10rpx;
    margin-bottom: 30rpx;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        // 虚线
        border-bottom: 1rpx dashed #e5e5e5;

        .name {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }
    }

    .center {
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        // 虚线
        border-bottom: 1rpx dashed #e5e5e5;
        text-align: center;

        .content {
            font-size: 59rpx;
        }

        .price {
            font-size: 40rpx;
            color: #000000;
        }

        .lingqu-btn {
            display: inline-block;
            width: 70%;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            font-size: 32rpx;
            color: #fff;
            background-color: rgb(247, 82, 67);
            border-radius: 10rpx;
        }

        .lingqu-btn:active {
            opacity: .9;
        }

    }

    .time {
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0 20rpx 0;
        border-bottom: 1rpx dashed #e5e5e5;


        .start {
            font-size: 28rpx;
            color: #666;
        }

        .end {
            font-size: 28rpx;
            color: #666;
        }
    }

}
</style>